<%--
  Created by IntelliJ IDEA.
  User: Sky
  Date: 2019/4/10
  Time: 11:17
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>


<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="${pageContext.request.contextPath}/images/fiveite.ico">

    <title>人流量检测系统</title>
    <!-- Bootstrap core CSS -->
    <link href="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/my_animation.css" type="text/css"/>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/components.css" type="text/css"/>
    <link rel="stylesheet" href="https://at.alicdn.com/t/font_1126822_bheq7e6ga8.css" type="text/css"/>
    <link rel="stylesheet" type="text/css"
          href="https://cdn.datatables.net/1.10.18/css/dataTables.bootstrap4.min.css"/>
    <style type="text/css">
        canvas {
            -moz-user-select: none;
            -webkit-user-select: none;
            -ms-user-select: none;
        }
    </style>
</head>

<body>
<div class="modal fade" id="operateAcc" tabindex="-1" role="dialog" aria-labelledby="operateAcc" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="operateAccTitle">更换账号</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div id="operateAccBody" class="modal-body">
                <div class="row">
                    <div class="col-8">
                        <div class="accItem nowAcc" id="nowAcc"></div>
                        <div class="accItem addAcc" id="addAcc">
                            <div class="input-group addInput">
                                <div class="input-group-prepend">
                                    <span class="input-group-text iconfont">&#xe634;</span>
                                </div>
                                <input type="text" id="account" class="form-control" onblur="" placeholder="账号"
                                       aria-label="Username" aria-describedby="addon-wrapping">
                            </div>
                            <div class="input-group addInput">
                                <div class="input-group-prepend">
                                    <span class="input-group-text iconfont">&#xe63e;</span>
                                </div>
                                <input type="password" id="password" class="form-control" placeholder="密码"
                                       aria-label="Username" aria-describedby="addon-wrapping">
                            </div>
                        </div>
                    </div>
                    <div class="col-4">
                        <div class="emptyCheckDiv"></div>
                        <div class="accCheck">没有该账号</div>
                        <div class="pwdCheck">密码错误</div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="universalBtn secondary" data-dismiss="modal">取消</button>
                <button type="button" id="change" class="universalBtn primary" disabled>确认更换</button>
            </div>
        </div>
    </div>
</div>
<div id="bg">
    <div id="lg_nav" class="lg_nav hidden-sm fixed-top hidden-xs colorBg">
        <div id="lg_nav_topd">

        </div>
        <div id="lg_nav_buttom">
            <a class="lg_nav_item"><p class="logo"><i class="iconfont">&#xe630;</i>
                <span id="logo unAbleSelect" class="logoico">人流量预警云平台</span></p>
            </a>
            <a href="${pageContext.request.contextPath}/realtime" class="lg_nav_item bk_hover">实时预警</a>
            <a href="${pageContext.request.contextPath}/history" class="lg_nav_item bk_hover">历史记录</a>
            <a href="${pageContext.request.contextPath}/admin/handler" id="admin" class="lg_nav_item bk_hover adminBtn hide hide">管理员<label class=""></label></a>
            <a href="${pageContext.request.contextPath}/setting" class="lg_nav_item bk_hover">设置</a>
            <div id="headerFeild" class="lg_nav_item">
                <div class="headerTop head_hover">
                    <span id="nickname">正在加载</span>
                </div>
                <div class="accSet colorBg">
                    <ul>

                        <li id="changeAcc">更换账号</li>
                        <li id="logoutAcc"><a href="${pageContext.request.contextPath}">退出账号</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <div class="default_layout colorBg">
        <div class="grad interval"></div>
        <h2 class="showTitle">欢迎使用本系统</h2>
    </div>

</div>

<div class="m_layout">
    <%--<button id="getImg" class="universalBtn primary"></button>--%>
    <div class="main_layout m_container">
        <canvas id="monthly" class="m_canvas"></canvas>
    </div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.bundle.min.js"></script>
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
        crossorigin="anonymous"></script>
<script src="${pageContext.request.contextPath}/js/jQuery.md5.js" type="text/javascript"></script>
<script src="${pageContext.request.contextPath}/js/jquery.cookie.js"></script>
<script src="${pageContext.request.contextPath}/js/utils.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous" async></script>
<script type="text/javascript" charset="utf8"
        src="https://cdn.datatables.net/1.10.18/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.18/js/dataTables.bootstrap4.min.js"></script>

<script src="${pageContext.request.contextPath}/js/public.js" type="text/javascript"></script>
<script type="text/javascript">
    cookiesAuth();
    SetLoading(500);
    const LOCATION = ['煤医道口', '公寓村东门', '南湖公园', '公寓村南门', '煤医道口', '大钊公园', '人民购物广场', '唐山学院'];
    const Person = [1000, 2000, 3000, 4000, 3000, 2000, 4000, 500, 300, 1500, 2500, 1400, 1600, 3100, 1200, 1300, 1400, 1300, 1800, 1500, 2300, 2500, 2400, 2600, 2200, 4200, 2700, 1700, 1800, 2300, 3500];
    $(document).ready(function () {
        const ctx_bar = document.getElementById('monthly').getContext('2d');
        const barChartData = {
            labels: LOCATION,
            datasets: [{
                label: '高峰人数',
                backgroundColor: [
                    window.chartColors.grey,
                    window.chartColors.red,
                    window.chartColors.orange,
                    window.chartColors.yellow,
                    window.chartColors.green,
                    window.chartColors.blue,
                    window.chartColors.purple
                ],//背景颜色
                borderColor: window.chartColors.blue,
                borderWidth: 1,
                data: Person
            }]

        };
        window.myBar = new Chart(ctx_bar, {
            type: 'bar',
            data: barChartData,
            options: {
                responsive: true,
                legend: {
                    position: 'top'
                },
                title: {
                    display: true,
                    text: '本月人流量较高的地区'
                },
                scales: {
                    xAxes: [{
                        display: true,
                        scaleLabel: {
                            display: true,
                            labelString: '地点'
                        }
                    }],
                    yAxes: [{
                        display: true,
                        scaleLabel: {
                            display: true,
                            labelString: '最高人数'
                        },
                        ticks: {
                            min: 0,
                            suggestedMax: 50
                        }
                    }]
                }
            }
        });
        // console.log(ctx_bar.toDataURL());
        $.liteAjax("${pageContext.request.contextPath}/api/querySomeData",{
            begintime:getdate(0),endtime:getdate(1)
        },function (data) {
            updateConfigAsNewObject(myBar,data[0],data[1]);
        });
        function updateConfigAsNewObject(chart,  mData, tData) {
            chart.data.datasets.forEach(function (dataset) {
                dataset.data = mData
            });
            chart.data.labels = tData;
            chart.update();
        }
        function toImg() {
            let monthly=document.getElementById('monthly').getContext('2d');
            // var canvas = document.getElementById("mycanvas");
            // var context = canvas.getContext('2d');
            let cw = 640;
            let ch = 450;
            monthly.fillStyle = "#ff0000";
            monthly.fillRect(0, 0, cw, ch);
            let img=new Image();
            // img.src="images/12.jpeg";
            monthly.drawImage(img,0,0, cw,ch);

            let imgData =monthly.toDataURL("image/png");
            let aEle=document.createElement("a");
            let event=new MouseEvent("click");
            aEle.download="test.png";
            aEle.href=imgData;
            aEle.dispatchEvent(event);
        }
        $("#getImg").on("click",function () {
            toImg();
        })
    });

</script>
</body>
</html>